<template>
  <el-card>
      <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">用户信息管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>用户信息列表</el-breadcrumb-item>
      </el-breadcrumb>
      </el-row>
    <el-table :data="userList" stripe style="width: 100%" border>
      <el-table-column prop="date" label="注册日期"> </el-table-column>
      <el-table-column prop="_id" label="用户ID"> </el-table-column>
      <el-table-column prop="username" label="用户名"> </el-table-column>
      <!-- <el-table-column prop="password" label="用户密码(已加密)" width="700px"> </el-table-column> -->
      <el-table-column label="账号状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.tag===1" type="primary">正常</el-tag>
          <el-tag v-else type="danger">已冻结</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150px">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deleteconfirm(scope.row._id)">删除</el-button>
          <el-button size="mini" type="warning" @click="djuser(scope.row._id)">冻结</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      userList: [],
    };
  },
  created() {
    this.getUserList();
  },
  methods: {
    async getUserList() {
      const { data: res } = await this.$http.get("/user/patient/patientList");
      if (res.status != 200) return this.$notify.error("获取用户信息列表失败");
      this.userList = res.userList
      this.$notify.success("获取用户信息列表成功")
    },
    djuser (id) {
      this.$confirm('此操作将永久冻结该账号, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const { data: res } = await this.$http.post('/user/patient/djuser/' + id)
          if(res.status !== 200) return this.$message.error('操作失败')
          this.$message({
            type: 'success',
            message: '冻结账号成功!'
          });
          this.getUserList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    deleteconfirm (id) {
      this.$confirm('此操作将永久删除该账号, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async () => {
          const { data: res } = await this.$http.post('/user/patient/delete/' + id)
          if(res.status !== 200) return this.$message.error('操作失败')
          this.$message({
            type: 'success',
            message: '删除账号成功!'
          });
          this.getUserList()
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    }
  },
};
</script>

<style scoped>
.el-card{
    width: 100%;
    height: 100%;
    overflow: auto;
}
.el-table {
  margin-top: 30px;
  margin-bottom: 30px;
}
.el-breadcrumb {
  margin-bottom: 20px;
}
.el-input {
  width: 300px;
  margin-right: 5px;
}
</style>